<template>
  <div class="layout-pd">
    <zh-table title="" ref="queryTable"   size="mini" funcCode="GenUserConfig0001" :columns="state.tableColumns" highlight-current-row>
      <template #query>
        <zh-form ref="queryFormRef" :modal="state.queryForm" label-width="100px" :span="6">
          <zh-form-input
            prop="datasourceId"
            label="默认数据源"
            type="text"
            placeholder="请输入默认数据源"
            v-model="state.queryForm.datasourceId"
          ></zh-form-input>

          <zh-form-input
            prop="connName"
            label="连接名"
            type="text"
            placeholder="请输入连接名"
            v-model="state.queryForm.connName"
          ></zh-form-input>

          <zh-form-query-button :formRef="queryFormRef" :tableRef="queryTable" :span="12" :showReset="true" :showAdvanced="true">
            <template #moreQuery>
              <zh-form-input
                prop="prefixTable"
                label="去除表名前缀"
                type="text"
                placeholder="请输入去除表名前缀"
                v-model="state.queryForm.prefixTable"
              ></zh-form-input>
              <zh-form-select
                label="生成功能"
                placeholder="请选择生成功能"
                prop="createFunc"
                v-model="state.queryForm.createFunc"
                :options="state.dictData.createFunc"
              ></zh-form-select>
              <zh-form-radio
                prop="permissionLevel"
                label="权限级别"
                :options="state.dictData.permissionLevel"
                v-model="state.queryForm.permissionLevel"
              ></zh-form-radio>
              <zh-form-radio
                prop="formLayout"
                label="表单布局"
                :options="state.dictData.formLayout"
                v-model="state.queryForm.formLayout"
              ></zh-form-radio>
            </template>
            <zh-button v-func:GenUserConfig0008 @click="showAdd()" buttonType="imp">导入</zh-button>
            <zh-button v-func:GenUserConfig0007 @click="showAdd()" buttonType="exp">导出</zh-button>
            <zh-button v-func:GenUserConfig0004 @click="showAdd()" buttonType="add">新增</zh-button>
          </zh-form-query-button>
        </zh-form>
      </template>
      <template #flag_default="{ row }">
        <zh-badge :status="statusMap[row.status].status" :text="statusMap[row.status].text" />
      </template>
      <template #operate="{ row }">
        <zh-button v-func:GenUserConfig0002 plain size="small" color="#409EFF" @click="showdetail(row, true)" style="color: green">查看</zh-button>
        <zh-button v-func:GenUserConfig0005 plain size="small" color="#E6A23C" @click="showdetail(row, false)">修改</zh-button>
        <zh-button v-func:GenUserConfig0006 plain size="small"  color="#F56C6C" @click="deleteData(row)" style="color: red">删除</zh-button>
      </template>
    </zh-table>
    <zh-dialog style="width: 80%" :title="state.title" v-model="state.detailVisible">
      <formEdit
          ref="detailFormRef"
          :disabled="state.showFlag"
          @cancel="cancel"
          @refreshTable="refreshTable"
          :id="state.selectRow.id"
      ></formEdit>
      <template #footer>
		<span class="dialog-footer">
			<zh-button @click="state.detailVisible = false" type="info">关闭</zh-button>
			<zh-button
              v-if="!state.showFlag"
              type="primary"
              :loading="state.saveLoading"
              :disabled="state.saveLoading"
              v-model:btnLoding="state.saveLoading"
              @click="save"
          >
              保存
          </zh-button>
        </span>
      </template>
    </zh-dialog>
  </div>
</template>
<script lang="ts" setup name="genUserConfigIndex">
import {  ref, onMounted, reactive } from 'vue';

import { ElMessageBox, ElMessage } from 'element-plus';
import formEdit from './component/formEdit.vue';

// ------------------接收传入参数(组件)-------------------

// ------------------钩子函数----------------------------
// 初始化
onMounted(() => {
  init();
});

// ------------------定义子组件--------------------------
const queryTable = ref();
const queryFormRef = ref();
const detailFormRef = ref();

const statusMap = {
  0: {
    status: 'error',
    text: '无效',
  },
  1: {
    status: 'processing',
    text: '有效',
  },
};

// ------------------变量区------------------------------
const state = reactive({
  advanced: false,
  toolbarConfig: {
    custom: true,
  },
  tableColumns: [
    {
      type: 'seq',
      width: 60,
      fixed: 'left',
      align: 'center',
      title: '序号',
    },
    {
      field: 'id',
      title: '配置id',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'userId',
      title: '用户id',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'datasourceId',
      title: '默认数据源',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'connName',
      title: '连接名',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'prefixTable',
      title: '去除表名前缀',
      visible: true,
      align: 'center',
      minWidth: 150,
      sortable: true,
    },
    {
      field: 'createFunc',
      title: '生成功能',
      visible: true,
      align: 'center',
      minWidth: 150,
      sortable: true,
    },
    {
      field: 'createType',
      title: '生成类型',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'packageName',
      title: '项目包名',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'baseclassId',
      title: '基类ID',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'baseClassCode',
      title: '继承类名',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'generatorType',
      title: '生成方式',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'permissionLevel',
      title: '权限级别',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'formLayout',
      title: '表单布局',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'backendPath',
      title: '后端生成路径',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'popType',
      title: '弹窗类型',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'frontendPath',
      title: '前端生成路径',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'templateMode',
      title: '模版名称',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'author',
      title: '作者',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'version',
      title: '项目版本号',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'email',
      title: '邮箱',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'options',
      title: '其他配置信息',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'treeParam',
      title: '树配置参数',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'reqBaseUrl',
      title: '请求基础url',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'operate',
      title: '操作',
      fixed: 'right',
      align: 'center',
      width: 250,
      slots: {
        // 使用插槽模板渲染
        default: 'operate',
      },
    },
  ],
  queryForm: {} as any,
  dictData: {} as any,
  title: '',
  detailVisible: false,
  showFlag: false,
  selectRow: {} as any,
  saveLoading: false,
  showType: true,
  areaCodeSelectTreeData: [] as any,
});
// ------------------方法区------------------------------
const init = () => {
  getDict();
  refreshTable();
};
// 查询数据字典信息
const getDict = () => {
  const params = {} as any;
  params.dictFields = "createFunc,permissionLevel,formLayout";
  if(params.dictFields){
    $api.common.getBatchDict.post(params).then((res) => {
      state.dictData = res.result;
    });
  }
};

//使用子组件方法，关闭弹窗
const cancel = (e: any) => {
  state.detailVisible = e;
};

const showAdd = () => {
  state.title = '新增';
  state.detailVisible = true;
  state.showFlag = false;
  state.selectRow = {};
};

const showdetail = (row, flag) => {
  if (!flag) {
    state.title = '信息修改';
  } else {
    state.title = '查看详情';
  }
  state.selectRow = row;
  state.showFlag = flag;
  state.detailVisible = true;
};
//保存
const save = () => {
  detailFormRef.value.save();
};

//刷新
const refreshTable = () => {
  queryTable.value.refresh(state.queryForm);
};
//删除
const deleteData = (row) => {
  ElMessageBox.confirm('是否确认删除？').then(() => {
    let params = {} as any;
    params.id = row.id;
    $api.common.send.post('GenUserConfig0006', params).then(() => {
      ElMessage.success('删除成功');
      refreshTable();
    });
  });
};

</script>
<style lang="scss" scoped></style>
